<template>
    <div-row :obj="obj" class="content-wrapper text-picture">
        <div class="cntl">
            <span class="cntl-bar cntl-center" :style="{backgroundColor: obj.timeLineColor}">
                <span class="cntl-bar-fill"/>
            </span>
            <div class="cntl-states">
                <div class="cntl-state" v-for="(item, index) in obj.imgTextBox" :key="index">
                    <div class="cntl-image" :class="obj.animateImg? 'wow '+obj.animateImg : ''">
                        <div class="cnt1-image-text">
                            <img :src="item.imgUrl" :style="{width: obj.imgWidth+'px'}">
                            <h4 class="info" v-html="item.info"/>
                        </div>
                    </div>
                    <div class="fl-right">
                        <div class="cntl-content" :class="obj.animateTitle? 'wow '+obj.animateTitle : ''">
                            <h4 v-html="item.title"/>
                            <p v-html="item.desc"/>
                        </div>
                    </div>
                    <div class="cntl-icon cntl-center" :style="{borderColor: obj.timeLineColor,backgroundColor: obj.timeLineIconBg}">
                        <i style="font-size: 30px;" v-if="item.icon" class="iconfont" :class="item.icon"/>
                        <span v-else>{{ index }}</span>
                    </div>
                </div>
            </div>
        </div>
    </div-row>
</template>
<script>
import animate from '@/mixins/animate'
export default {
    name: 'TimeLine',
    mixins: [animate]
}
</script>
<style lang="scss" scoped>
        
</style>

